<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spd" tagdir="/WEB-INF/tags/admin/"%>
<spd:layout>

<jsp:attribute name="head">
<!-- html的头部内容，如title、css等。 -->
<title>系统角色</title>
</jsp:attribute>

<jsp:attribute name="body">
<!-- 页面的主要内容 -->
<div class="row">
	<div class="col-md-12">
		<!--box-->
		<div class="box box-primary">
			<div class="box-body">
				<div class="btn-group">
					<button class="btn btn-success" id="btnAdd" style="width:110px">添加角色</button>
				</div>
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<!-- /.row -->

<div class="row">
	<div class="col-md-12">
		<div class="box box-primary">
			<div class="box-body no-padding">
				<table id="table"></table>
				<!-- /#table -->
			</div>
			<!-- /.box-body -->
		</div>	
	</div>
</div>
<!-- /.row -->
</jsp:attribute>

<jsp:attribute name="dialog">
<!-- 页面的dialog，注意不能放到body中 -->

<form id="formAdd">
	<table class="table table-bordered spd-table">
		<tbody>
			<tr>
				<td style="width: 100px;"><label class="spd-label">角色名称</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="name" placeholder="必填">
					</div>
				</td>
			</tr>
		</tbody>
	</table>
</form>
<!-- /#formAdd -->

<form id="formEdit">
	<input type="hidden" name="id">
	<table class="table table-bordered spd-table">
		<tbody>
			<tr>
				<td style="width: 100px;"><label class="spd-label">角色名称</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="name" placeholder="必填">
					</div>
				</td>
			</tr>
		</tbody>
	</table>
</form>
<!-- /#formEdit -->

<div id="dialogResource">
	<ul id="resourceTree" class="ztree spd-dialog-tree"></ul>
</div>
<!-- /#dialogResource -->

</jsp:attribute>

<jsp:attribute name="script">
<!-- 页面的JS脚本 -->
<script type="text/javascript">
	$(function(){		
		$('#btnAdd').on('click', function() {
			SpdUI.openFormDialog('#formAdd');
			return false;
		});
		
		SpdUI.bootstrapTable('#table', {
			url: SpdUI.contextPath + '/admin/sysrole/queryPage.do',
			columns: [{
				title: '角色名称',
				field: 'name'
			},{
				title: '操作',
				field: 'id',
				width: 240,
				formatter: function(vale, row, index) {
					var html = '';
					html += '<div class="btn btn-xs btn-primary btn-row-edit">编辑</div>&nbsp;';
					html += '<div class="btn btn-xs btn-warning btn-row-resource">关联菜单</div>&nbsp;';
					html += '<div class="btn btn-xs btn-danger btn-row-delete">删除</div>';
					return html;
				},
				events: {
					'click .btn-row-resource': function(event, value, row, index) {
						SpdUI.openDialog('#dialogResource', {
							sysRoleId: row.id
						});
					},
					'click .btn-row-edit': function(event, value, row, index) {
						SpdUI.openFormDialog('#formEdit', row);
					},
					'click .btn-row-delete': function(event, value, row, index) {
						SpdUI.confirm('确定删除角色？', function(){
							SpdUI.getJSON({
								url: SpdUI.contextPath + '/admin/sysrole/delete.do',
								data: {
									id: row.id
								},
								success: function(data, json){
									$('#table').bootstrapTable('refresh', {
										silent: true
									});
								}
							});
						});
					}
				}
			}]
		});
		
		SpdUI.dialog('#dialogResource', {
			title: '关联菜单',
			dialogData: {
				treeId: 'resourceTree'
			},
			oncreate: function(dialog, dialogData, dialogBody) {
				$('#' + dialogData.treeId).height($(window).height() - 300);
			},
			onhide: function(dialog, dialogData, dialogBody){
				$.fn.zTree.destroy(dialogData.treeId);
			},
			onshow: function(dialog, dialogData, dialogBody) {
				SpdUI.getJSON({
					url: SpdUI.contextPath + '/admin/sysrole/queryResourceTree.do',
					data: {
						sysRoleId: dialogData.sysRoleId
					},
					success: function(data, json){
						$.fn.zTree.init($('#' + dialogData.treeId), {
							check: {
								enable: true
							},
							view: {
								selectedMulti: false
							}
						}, data);
					},
					failure: function(json, message){
						SpdUI.alert('加载菜单失败！');
					}
				});
			},
			buttons: [{
				label: '保存',
				cssClass: 'btn-primary',
				action: function(dialog, dialogData, dialogBody) {
					var treeId = dialogData.treeId,
						tree = $.fn.zTree.getZTreeObj(treeId),
						nodes = tree.getCheckedNodes(true),
						ids = [];
					
					$.each(nodes, function(i, v){
						ids.push(v.id);
					});
					
					SpdUI.postJSON({
						url: SpdUI.contextPath + '/admin/sysrole/bindResources.do',
						data: {
							sysRoleId: dialogData.sysRoleId,
							sysResourceIds: ids.join(',')
						},
						success: function(data, json) {
							SpdUI.alert('保存成功！');
						}
					});
				}
			}]
		});
		
		SpdUI.formDialog('#formAdd', {
			title: '添加角色',
			validate: {
				name: {
					rule : 'required;length(1~20);',
					msg : '请输入角色名称，不得超过20个字。'
				}
			},
			onsubmit: function($form, formData, dialog, dialogData) {
				SpdUI.ajaxSubmit($form, {
					url: SpdUI.contextPath + '/admin/sysrole/add.do',
					success: function(data, json){						
						$('#table').bootstrapTable('refresh', {
							silent: true
						});
						dialog.close();
					}
				});
			}
		});
		
		SpdUI.formDialog('#formEdit', {
			title: '编辑角色',
			validate: {
				name: {
					rule : 'required;length(1~20);',
					msg : '请输入角色名称，不得超过20个字。'
				}
			},
			onsubmit: function($form, formData, dialog, dialogData) {
				SpdUI.ajaxSubmit($form, {
					url: SpdUI.contextPath + '/admin/sysrole/update.do',
					success: function(data, json){
						$('#table').bootstrapTable('refresh', {
							silent: true
						});
						dialog.close();
					}
				});
			}
		});		
	});
</script>
</jsp:attribute>

</spd:layout>